window.onload = function() {
	var box = document.getElementById('box'); //获取盒子id
	var box_image = box.querySelector('img'); //获取原图
	var sweepBox = box.getElementsByClassName('sweepBox')[0]; //获取扫描盒子
	var show = document.querySelector('.show'); //获取显示图片的盒子
	var width = box_image.offsetWidth; //原图片的宽
	var height = box_image.offsetHeight; //原图片的高
	//  扫描框宽高
	var sweepW = width / 2,
		sweepH = height / 2,
		//  扫描框移动的度量宽高（用来计算鼠标在扫描盒子的移动量，在加上扫描盒子当前的offsetleft值就是盒子最终的位置）
		stepW = sweepW / 2,
		stepH = sweepH / 2;
	/*确认鼠标从哪个方向进入盒子，从而确认移动盒子的初始位置*/
	box.onmouseenter = function(e) {
		function load(x, y) {

			// 扫描框的横纵坐标偏移量
			var offsetX = offsetY = 0
			// 不知用什么switch表达式好，所以用了如下方法来判断位置，你有没有好方法？ 
			switch([(x - sweepW) > 0, (y - sweepH) > 0].join(',')) {

				case 'false,true':
					//  左下
					offsetY = sweepH;
					break;
				case 'false,false':
					// 左上
					break;
				case 'true,false':
					//  右上
					offsetX = sweepW;

					break;
				case 'true,true':
					//  右下
					offsetX = sweepW;
					offsetY = sweepH;
					break;
			};
			/* //第二种方法
			 if(x-sweepW>0){
			 	if(y-sweepH<0){
			 		offsetX = sweepW;
			 	}
			 	else{
			 		offsetX = sweepW;
			      	offsetY = sweepH;
			 	}
			 }
			 else{
			 	if(y-sweepH>0){
			 		offsetY = sweepH;
			 	}
			 }*/
			/*设置扫描盒子的初始位置*/
			sweepBox.style.left = offsetX + 'px';
			sweepBox.style.top = offsetY + 'px';
			sweepBox.style.display = 'block';
			/*设置显示盒子的内容*/
			show.style.backgroundPositionX = -offsetX * 2 + 'px';
			show.style.backgroundPositionY = -offsetY * 2 + 'px';
			show.style.display = 'block';
		}
		load(e.offsetX, e.offsetY);
	};
	/*扫描盒子的鼠标经过事件*/
	sweepBox.onmousemove = function(e) {
		/*扫描盒子的移动量*/
		var moveX = e.offsetX - stepW;
		var moveY = e.offsetY - stepH;
		// 扫描框当前的偏移量
		var offsetL = this.offsetLeft;
		var offsetT = this.offsetTop;
		// 计算出扫描盒子移动的最终坐标
		var toX, toY;
		// 沿x轴往右移动，并且扫描框右边界还没有碰到图片右边缘，那么可以移动，并且移动的距离最远到图片右边缘
		if(moveX > 0 && offsetL < sweepW) {
			toX = Math.min(offsetL + moveX, sweepW); /*因为扫描盒子的位置在0到图片的一半*/
		}
		// 与之相反，沿x轴往左移动，那么判断左边界未碰到图片左边缘，移动并且移动最左只能到0
		if(moveX < 0 && offsetL > 0) {
			toX = Math.max(offsetL + moveX, 0)
		}
		// y轴雷同
		if(moveY > 0 && offsetT < sweepH) {
			toY = Math.min(offsetT + moveY, sweepH);
		}

		if(moveY < 0 && offsetT > 0) {
			toY = Math.max(offsetT + moveY, 0);
		}
		/*设置扫描盒子的最终位置*/
		sweepBox.style.left = toX + 'px';
		sweepBox.style.top = toY + 'px';
		/*设置显示盒子内容位置*/
		show.style.backgroundPositionX = -toX * 2 + 'px';
		show.style.backgroundPositionY = -toY * 2 + 'px';
	}
	/*注销事件*/
	box.onmouseleave = function() {
		sweepBox.style.display = 'none';
		show.style.display = 'none';
	}
}